<template>
    <div class="perc">
        <div class="top">
            <img class="demo" :src="userInfo.avatar">
            <p class="p1 fl">{{userInfo.nickname}}</p>
            <div class="add-r">
                <p class="p1">身份：{{userInfo.role}}</p>
                <p class="p1">绑定手机号：{{userInfo.realphone}}</p>
            </div>
        </div>
        <div class="nav">
            <p class="p1">我的客户(一维客户)</p>
            <p class="p1">{{count}}人</p>
        </div>
        <div class="main">
            <van-list
                    v-model="loading"
                    error-text="请求失败，点击重新加载"
                    finished-text="没有更多数据"
                    @load="onLoad"
                    :finished="finished"
                    :offset="60"
            >
                <div class="item"
                     v-for="(item,index) in list"
                     :key="index">
                    <img class="demo" :src="item.avatar">
                    <div class="itemm">
                        <p class="p1">{{item.nickname}}</p>
                        <p class="p1">ID：{{item.uid}}</p>
                        <p class="p1">身份：{{item.role}}</p>
                        <p class="p1">绑定手机号：{{item.phone}}</p>
                    </div>
                    <div class="itemr">
                        <!--<p class="p1">总推广：{{item.}}人</p>-->
                        <p class="p1">推广创客：{{item.direct_size}}人</p>
                        <p class="p1">推广vip：{{item.vip_size}}人</p>
                        <p class="p1">推广总代：{{item.top_size}}人</p>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<div>
</div>
<script>
    import API from '../../request/api';

    export default {
        /**
         * 我的客户
         */
        name: "personCustomer",
        data() {
            return {
                count: 0,
                userInfo: {},
                list: [],
                page: 0,
                loading: false,
                finished: false,
            };
        },
        created() {
            this.userInfo = this.$store.state.login.userInfo;
        },
        methods: {
            onLoad() {
                // 异步更新数据
                if (this.finished === false) {
                    this.request.get(API.personCus, {page: this.page, size: 10}).then((res) => {
                        this.count = res.count;
                        for (let index in res.list) {
                            this.list.push(res.list[index]);
                        }
                        // 加载状态结束
                        this.loading = false;
                        // 数据全部加载完成
                        if (res.list.length < 10) {
                            this.finished = true;
                            this.loading = false;
                        }
                        this.page++;
                    });
                }
            }
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .perc {
        flex-y()
        width 100vw

        .top {
            flex-x()
            height vw(55)
            flex-x()
            width 100%
            padding 0 cellPadding
            box-sizing border-box
            background grayF

            .demo {
                width vw(40)
                height vw(40)
                background #ccc
                margin-right 2vw
                border-radius main-radius
            }

            .add-r {
                p {
                    line-height 1.4
                    text-align right
                }
            }

            .p1 {
                word-vw(12px, gray3)
            }

            .fl {
                flex 1
            }
        }

        .nav {
            flex-x()
            padding cellPadding
            width 100%
            box-sizing border-box
        }

        .main {
            width 100%

            .item {
                height vw(110)
                background white
                padding 0 cellPadding
                box-sizing border-box
                width 100%
                margin-bottom vw(5)
                flex-x()

                .demo {
                    width vw(40)
                    height vw(40)
                    background #ccc
                    margin-right 2vw
                    border-radius main-radius
                }

                .itemm {
                    flex 1

                    .p1 {
                        line-height 1.8
                    }
                }

                .itemr {
                    .p1 {
                        line-height 1.8
                    }
                }
            }
        }
    }
</style>